<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bitter Mobile Template</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
    <meta name="description" content="Bitter Mobile Template">
    <meta name="keywords" content="bootstrap, mobile template, cordova, phonegap, mobile, html, responsive" />
</head>

<body>

    <!-- Page loading -->
    <div class="loading">
        <div class="spinner-grow"></div>
    </div>
    <!-- * Page loading -->

    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="javascript:;" class="icon toggleSidebar">
                <i class="icon ion-ios-menu"></i>
            </a>
        </div>
        <div class="pageTitle">搜索</div>
        <div class="right">
            <!-- <label for="searchInput" class="mb-0 icon toggleSearchbox"> -->
             <a href="tools.html"><i class="icon ion-ios-search"></i></a>
            <!-- </label> -->
        </div>
    </div>
    <!-- searchBox -->
    <div class="searchBox">
		
        <form>
            <span class="inputIcon">
                <i class="icon ion-ios-search"></i>
            </span>
            <input type="text" class="form-control" id="searchInput" placeholder="请输入...">
            <a href="javascript:;" class="toggleSearchbox closeButton">
                <i class="icon ion-ios-close-circle"></i>
            </a>
        </form>
    </div>
    <!-- * searchBox -->
    <!-- * App Header -->

    <!-- App Capsule -->
    <div id="appCapsule">

        <div class="appContent">


            <!-- listview -->
           <div class="searchBlock mt-3">
               <form>
                   <span class="inputIcon">
                       <i class="icon ion-ios-search"></i>
                   </span>
                   <input type="text" class="form-control" id="searchInput" placeholder="请输入...">
               </form>
           </div>
           
           
           <div class="sectionTitle mt-4 mb-0">
               <div class="text-muted">素材</div>
               <div class="title">
                   <h1>分类</h1>
               </div>
           </div>
           
           <div class="row">
               <div class="col-6 mt-2">
                   <a href="#" class="btn btn-dark btn-block">
                       <i class="icon ion-ios-paper"></i>
                       轻柔
                   </a>
               </div>
               <div class="col-6 mt-2">
				   <a href="#" class="btn btn-dark btn-block">
				       <i class="icon ion-ios-paper"></i>
                       摇滚
                   </a>
               </div>
               <div class="col-6 mt-2">
                   <a href="#" class="btn btn-danger btn-block">
                       <i class="icon ion-ios-musical-notes"></i>
                       国风
                   </a>
               </div>
               <div class="col-6 mt-2">
                   <a href="#" class="btn btn-danger btn-block">
                       <i class="icon ion-ios-musical-notes"></i>
                       电音
                   </a>
               </div>
               <div class="col-6 mt-2">
                   <a href="#" class="btn btn-info btn-block">
                       <i class="icon ion-ios-pulse"></i>
                       古典
                   </a>
               </div>
               <div class="col-6 mt-2">
                   <a href="#" class="btn btn-info btn-block">
                       <i class="icon ion-ios-pulse"></i>
                       情歌
                   </a>
               </div>
			   <div class="col-6 mt-2">
                    <a href="#" class="btn btn-warning btn-block">
                       <i class="icon ion-ios-paper"></i>
			           影视原声
			       </a>
			   </div>
			   <div class="col-6 mt-2">
                   <a href="#" class="btn btn-warning btn-block">
                       <i class="icon ion-logo-game-controller-b"></i>
			           民谣
			       </a>
			   </div>
			   <div class="col-6 mt-2">
					<a href="#" class="btn btn-success btn-block">
					   <i class="icon ion-logo-game-controller-b"></i>
			           纯音乐
			       </a>
			   </div>
			   <div class="col-6 mt-2">
					<a href="#" class="btn btn-success btn-block">
					   <i class="icon ion-logo-game-controller-b"></i>
			           欧美
			       </a>
			   </div>
           </div>
           
          
        </div>

    </div>
    <!-- appCapsule -->


    <!-- App Bottom Menu -->
    <div class="appBottomMenu">
        <div class="item">
            <a href="homepage.html">
                <p>
                    <i class="icon ion-ios-water"></i>
                    <span>首页</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="activitiy-list.html">
                <p>
                    <i class="icon ion-ios-apps"></i>
                    <span>活动</span>
                </p>
            </a>
        </div>
        <div class="item active">
            <a href="tools.html">
                <p>
                    <i class="icon ion-ios-analytics"></i>
                    <span>工具</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="social-home.html">
                <p>
                    <i class="icon ion-ios-search"></i>
                    <span>动态</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="people-info.html">
                <p>
                    <i class="icon ion-ios-person"></i>
                    <span>我的</span>
                </p>
            </a>
        </div>
    </div>
    <!-- * App Bottom Menu -->

    <!-- Sidebar Menu -->
    <div class="sidebarWrapper">
        <div class="overlay toggleSidebar"></div>
        <nav class="sidebar">
            <div class="profilebox">
                <img src="assets/img/sample/avatar.jpg" alt="avatar" class="avatar">
                <h2 class="title">醒了很久还是很感动</h2>
                <h5 class="lead">
                    <i class="icon ion-ios-pin mr-1"></i>
                    浙江省杭州市
                </h5>
                <div class="button">
                    <a href="#">
                        <i class="icon ion-ios-settings"></i>
                    </a>
                </div>
            </div>
            <div class="sidebarGroup">
                <ul class="sidebarMenu">
                    <li>
                        <a href="social-home.html">
                            <i class="icon ion-ios-people"></i>
                            动态
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <i class="icon ion-ios-chatboxes"></i>
                            消息
                        </a>
                    </li>
                    <li>
                        <a href="activitiy-list.html">
                            <i class="icon ion-ios-apps"></i>
                            活动
                        </a>
                    </li>
                    <li>
                        <a href="people-info.html">
                            <i class="icon ion-ios-book"></i>
                            信息
                        </a>
                    </li>
                    <li>
                        <a href="page-login.html">
                            <i class="icon ion-ios-lock"></i>
                            登出
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sidebarGroup">
                <ul class="sidebarMenu">
                    <li class="title">在线</li>
                    <li>
                        <a href="social-chat.html">
                            <img src="assets/img/sample/avatar2.jpg" alt="avatar" class="avatar">
                            胖大海
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <img src="assets/img/sample/avatar3.jpg" alt="avatar" class="avatar">
                            佛山菩提
                            <span class="badge badge-primary">2</span>
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <img src="assets/img/sample/avatar4.jpg" alt="avatar" class="avatar">
                            刘小佳
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <img src="assets/img/sample/avatar5.jpg" alt="avatar" class="avatar">
                            张铁柱
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <img src="assets/img/sample/avatar6.jpg" alt="avatar" class="avatar">
                            方言小李
                        </a>
                    </li>
                </ul>
            </div>

        </nav>
    </div>
    <!-- * Sidebar Menu -->


    <!-- ///////////// Js Files ////////////////////  -->
    <!-- Jquery -->
    <script src="assets/js/lib/jquery-3.4.1.min.js"></script>
    <!-- Bootstrap-->
    <script src="assets/js/lib/popper.min.js"></script>
    <script src="assets/js/lib/bootstrap.min.js"></script>
    <!-- Owl Carousel -->
    <script src="assets/js/plugins/owl.carousel.min.js"></script>
    <!-- Main Js File -->
    <script src="assets/js/app.js"></script>


</body>

</html>
